/* OneTabBar
 * created by qinghong
 * 2016-7-11
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    TabBarIOS,
    View,
    Text,
    Navigator
} from 'react-native';

import constant from './constant';

import Home     from '../Home';
import Article  from '../Article';
import Question from '../Question';
import Thing    from '../Thing';
import Me       from '../Me';

const TAB_HOME = 'tab_home';
const TAB_ARTICLE = 'tab_article';
const TAB_QUESTION = 'tab_question';
const TAB_THING = 'tab_thing';
const TAB_ME = 'tab_me';

const TabBarItems = [
    {component: Home, title: '首页', icon: require('../../images/home.png'), tabId: TAB_HOME},
    {component: Article, title: '文章', icon: require('../../images/article.png'), tabId: TAB_ARTICLE},
    {component: Question, title: '问题', icon: require('../../images/question.png'), tabId: TAB_QUESTION},
    {component: Thing, title: '东西', icon: require('../../images/thing.png'), tabId: TAB_THING},
    {component: Me, title: '个人', icon: require('../../images/me.png'), tabId: TAB_ME}
];

export default class OneTabBar extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            selectedTabId: TAB_HOME
        };
    }

    render() {
        return (
            <View style={styles.container}>
                <TabBarIOS
                    tintColor={constant.tabBarTintColor}
                    barTintColor={constant.tabBarBgColor}>
                    {
                        TabBarItems.map((controller, i) => {
                            let Component = controller.component;
                            return (
                                <TabBarIOS.Item
                                    key={i}
                                    title={controller.title}
                                    icon={controller.icon}
                                    selected={this.state.selectedTabId === controller.tabId}
                                    onPress={() => {this.setState({selectedTabId: controller.tabId})}}>
                                    <Component navigator={this.props.navigator} {...this.props}/>
                                </TabBarIOS.Item>
                            )
                        })
                    }
                </TabBarIOS>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: constant.colors.mainBgColor
    }
});

